<template>
	<view :class="['searchView',{searchView_padding90:showConfirmBtn}]">
		<view class="search_view">
			<view class="search_input"> 
				<image src="/static/images/search.png"></image>
				<input type="text" v-model="searchText" @input="inputChange" placeholder="请输入关键词" />
				<image src="/static/images/empty_btn.png" @click.stop="emptyValue" v-show="showEmptyBtn"></image>
			</view>
		</view>
		<view class="search_list" v-if="!hideBox">
			<template v-for="(item,index) in listData">
				<view :key="index" v-if="key=='customer'" class="list_item" @click.stop="selectThis(item)">
					<!-- <image :src="item.avatar" class="avatar"></image> -->
					<text class="name">{{item.name}}</text>
					<text class="company">{{item.title}}</text>
				</view> 
				<view :key="index" v-if="key=='product' && item.stock>0" class="list_item" style="font-size:22rpx;height:auto;" @click.stop="selectThis(item)">
					<image :src="item.thumb" v-if="key!='product'" class="avatar"></image>
					<text class="name">{{item.title}}</text>
					<text class="company">数量：{{item.stock}}</text>
					<text class="name">规格：{{item.specifications?item.specifications:'暂无'}}</text>
					<text class="name">型号：{{item.module?item.module:'暂无'}}</text>
					<text class="name">单位：{{item.unit?item.unit:''}}</text>
				</view>
				<view :key="index" v-if="key=='my_accessories' || key=='my_accessories_2'" class="list_item" style="font-size:22rpx;height:auto;" @click.stop="selectThis(item)">
					<image :src="item.thumb" v-if="key!='product'" class="avatar"></image>
					<text class="name">{{item.title}}</text>
					<text class="company">数量：{{item.stock}}</text>
					<text class="name">规格：{{item.specifications?item.specifications:'暂无'}}</text>
					<text class="name">型号：{{item.module?item.module:'暂无'}}</text>
					<text class="name">单位：{{item.unit?item.unit:''}}</text>
				</view>
				<view :key="index" v-if="key=='customer_device'||key=='service'" class="list_item" @click.stop="selectThis(item)">
					<text class="company">{{item.title}}</text>
				</view>
				<view :key="index" v-if="key=='label'" class="list_item checkBox_item">
					<text class="company">{{item.value}}</text>
					<CheckBox :item='item' @select="checkboxChange"></CheckBox>
				</view>
				<view :key="index" v-if="key=='trackStatus'||key=='regoin'||key=='biz_area'" class="list_item" @click.stop="selectThis(item)">
					<text class="company">{{item.value}}</text>
				</view>
				<view :key="index" v-if="key=='zxr_user' || key=='czr_user' ||key=='fs_user'||key.indexOf('all_user')!=-1 " class="list_item user_item" @click.stop="openItem(item)">
					<text class="company">{{item.title}}</text>
					<text class="count">{{item.user_list.length}}</text>
					<view class="user_inner_box" v-if="item.isOpen">
						<template v-for="(item2,index2) in item.user_list">
							<view :key="index2" class="user_inner" @click.stop='selectThis(item2)'>
								<image :src="item2.headimg" class="avatar"></image>
								<text class="name">{{item2.username}}</text>
							</view>
						</template>
					</view>
				</view>
			</template>
		</view>
		<view class="bottom_btn" v-if="showConfirmBtn">
			<view class="bottom_btn_list">
				<view @click.stop="selectThis(checkBoxList)">确定</view>
			</view>
		</view>
		<Loading ref="load"></Loading>
	</view>
</template>
 
<script>
	import { 
		debounce,
		deepClone
	} from '@/static/js/index.js'
	export default {
		data() {
			return {
				searchText: "",
				showEmptyBtn: false,
				loading: true, 
				hideBox: true,
				key: "",
				page: 1,
				listData: [],
				id: "",
				showConfirmBtn: false,
				checkBoxList: [], //复选框的内容
			}
		},
		onLoad(options) {
			this.key = options.searchKey;
			this.showConfirmBtn = this.key == 'label' ? true : false;
			this.id = options.id;
			console.log('this.key', this.key)
			this.setNavTitle();
			this.serachContent(2);
			this.registerInputMnitor();
		},
		onReachBottom() {
			if (this.loading)
				this.serachContent(3);
		},
		methods: {
			// 设置标题
			setNavTitle(title) {
				uni.setNavigationBarTitle({
					title
				})
			},
			// 清空input
			emptyValue() {
				this.searchText = "";
				this.inputChange();
			},
			serachContent(type) {
				switch (this.key) {
					case 'customer':
						this.setNavTitle('选择客户');
						this.getData(type);
						break;
					case 'product':
						this.setNavTitle('选择产品');
						this.getData(type);
						break;
					case 'my_accessories':
						this.setNavTitle('选择我的配件');
						this.getData(type);
						break;
					case 'my_accessories_2':
						this.setNavTitle('选择我的附件');
						this.getData(type);
						break;
					case 'zxr_user':
						this.setNavTitle('选择执行人员');
						this.getData(type);
						break;
					case 'czr_user':
						this.setNavTitle('选择操作人');
						this.getData(type);
						break;
					case 'fs_user':
						this.setNavTitle('选择售后人员');
						this.getData(type);
						break;
					case 'all_user':
						this.setNavTitle('选择员工');
						this.getData(type);
						break;
					case 'all_user2':
						this.setNavTitle('选择售后负责人');
						this.getData(type);
						break;
					case 'all_user3':
						this.setNavTitle('选择业务联系人');
						this.getData(type);
						break;
					case 'all_user4':
						this.setNavTitle('选择审批人');
						this.getData(type);
						break;
					case 'all_user5':
						this.setNavTitle('选择审核人');
						this.getData(type);
						break;
					case 'customer_device':
						this.setNavTitle('选择设备');
						this.getData(type);
						break;
					case 'service':
						this.setNavTitle('选择服务');
						this.getData(type);
						break;
					case 'label':
						this.setNavTitle('选择标签');
						this.getData(type);
						break;
					case 'trackStatus':
						this.setNavTitle('选择跟踪状态');
						this.getData(type);
						break;
					case 'regoin':
						this.setNavTitle('选择区域');
						this.getData(type);
						break;
					case 'biz_area':
						this.setNavTitle('选择营业面积');
						this.getData(type);
						break;
				}
			},
			getData(type) { 
				this.$refs.load.initLoading({
					loadType: type,
					loadPrompt: true
				}).then(res => {
					this.hideBox = false;
					if (type != 3) {
						this.listData = [];
						this.page = 1;
					}
					if (this.key == "customer") {
						let belong  = this.$store.getters.userInfo.branch_type!=1?1:2;
						let data = {
							belong:belong,
							class: 1,
							page: this.page,
							search: this.searchText,
							user_id: uni.getStorageSync("userId")
						}
						this.$api.getClientList(data).then(res => {
							this.reqed(res);
						})
					} else if (this.key == "product") {
						let data = {
							page: this.page,
							search: this.searchText
						}
						if(this.id){
							data.warehouse_id = this.id;
						}
						this.$api.getProductList(data).then(res => {
							this.reqed(res);
						})
					} else if ( this.key == "fs_user") {
						let upJson = {search: this.searchText};

						this.$api.getUserList(upJson).then(res => {
							let newRes = deepClone(res).filter(item => item.id == 4);
							let data = this.page > 1 ? [] : newRes;
							data.forEach(item => {
								item.isOpen = false;
							})
							this.reqed({
								data: data
							});
						})
					} else if(this.key == "zxr_user" || this.key == "czr_user") {
						let upJson = {search: this.searchText};
						this.$api.getUserList(upJson).then(res => {
							//let newRes = deepClone(res).filter(item => item.id == 4);
							res.forEach(item => {
								item.isOpen = false;
							})
							let data = this.page > 1 ? [] : res;
							this.reqed({
								data: data
							});
						})
					} else if (this.key.indexOf('all_user')!=-1) {
						let upJson = {search: this.searchText}; 
						this.$api.getUserList(upJson).then(res => {
							if(this.key == "all_user4"){
								let userList = [];
								res.forEach(item => {
									if(this.isAduit(item,100003)){
										item.isOpen = false;
										userList.push(item);
									}
								})
								let data = this.page > 1 ? [] : userList;
								//console.log("===封装的数据===》》》》",userList);
								this.reqed({
									data: data
								});
							}else if(this.key == "all_user5"){
								let userList = [];
								res.forEach(item => {
									if(this.isAduit(item,100006)){
										item.isOpen = false;
										userList.push(item);
									}
								})
								let data = this.page > 1 ? [] : userList;
 								this.reqed({
									data: data
								});
							}else{
								res.forEach(item => {
									item.isOpen = false;
								})
								let data = this.page > 1 ? [] : res;
								this.reqed({
									data: data
								});
							}
							
						})
					} else if (this.key == "my_accessories") { // 配件
						this.$api.getMyAccessoriesList({
							user_id: this.$store.getters.userInfo.id,
							product_type: 1
						}).then(res => { // 配件
							let newRes = res.data.filter(item => item.stock > 0);
							let data = this.page > 1 ? [] : newRes;
							this.reqed({
								data:data
							});
						})
					} else if(this.key == "my_accessories_2"){ // 附件
						this.$api.getMyAccessoriesList({
							user_id: this.$store.getters.userInfo.id,
							product_type: 2
						}).then(res => { // 附件
							let newRes = res.data.filter(item => item.stock > 0);
							let data = this.page > 1 ? [] : newRes;
							this.reqed({
								data:data
							});
						})

					} else if (this.key == "customer_device") {
						this.$api.getClientDetails({
							customer_id: this.id
						}, 1).then(res => { // 设备
							let data = this.page > 1 ? [] : res.data;
							this.reqed({
								data: data
							});
						})
					} else if (this.key == "service") {
						this.$api.getServiceList().then(res => { // 服务
							let data = this.page > 1 ? [] : res;
							this.reqed({
								data: data
							});
						})
					} else if (this.key == "label") {
						this.$api.getClientLabel({}).then(res => {
							let data = this.page > 1 ? [] : res.map((item, index) => {
								return {
									value: item,
									id: index,
									checked: false
								}
							});
							this.reqed({
								data: data
							}).then(res2 => {
								this.likeQuery();
							});
						})
					} else if (this.key == "trackStatus") { 
						this.$api.getTrackStatusList().then(res => {
							let data = this.page > 1 ? [] : res.map((item, index) => {
								return {
									value: item
								}
							});
							this.reqed({
								data: data
							}).then(res2 => {
								this.likeQuery();
							});
						})
					}else if (this.key == "regoin") {
						this.$api.getRegionList().then(res => {
							let data = this.page > 1 ? [] : res.map((item, index) => {
								return {
									value: item
								}
							});
							this.reqed({
								data: data
							}).then(res2 => {
								this.likeQuery();
							});
						})
					}else if(this.key == "biz_area"){

						this.$api.getBizAreaList().then(res => {
							let data = this.page > 1 ? [] : res.map((item, index) => {
								return {
									value: item
								}
							});
							this.reqed({
								data: data
							}).then(res2 => {
								this.likeQuery();
							});
						})

					}
				})
			},
			isAduit(item,id){ // 是否有审批/审核权限   审批：100003 
 
				if(item.rule==''||item.rule.length==0){
					return false;
				}else{
					let rule = item.rule;
					for(let i in rule){

						if(rule[i].table_id == 100000){// 审批
							for(let j in rule[i].data){
								if(rule[i].data[j] == id){ // 权限
									return true;
								}
							}
						}

					}

				}

				return false;
			}, 
			//打开子菜单
			openItem(item) {
				item.isOpen = !item.isOpen;
			},
			//请求后的操作
			reqed(res) {
				return new Promise((resolve, reject) => {
					this.$refs.load.getLoadingData({
						oldData: this.listData,
						newData: res.data
					}).then(res => {
						this.listData = res.list;
						this.filterList();
						// console.log('this.listData', this.listData, res)
						this.loading = res.loading;
						this.page++;
						resolve();
					})
				})
			},
			// 注册input防抖监听
			registerInputMnitor() {
				this._inputChange = debounce(() => {
					this.serachContent(2);
				}, 500);
			},
			//input值持续改变
			inputChange() {
				this._inputChange();
			},
			//模糊查询
			likeQuery() {
				let data = this.listData.filter(item => item.value.indexOf(this.searchText) != -1);
				this.listData = data;
			},
			//筛选数据中的数据
			filterList() {
				if (this.key == "zxr_user" || this.key == "fs_user" || this.key == "all_user") {
					let result = this.listData.filter(item => item.user_list.filter(item2 => item2.username.indexOf(this.searchText) !=
						-1).length > 0);
					if (this.searchText != '')
						result.forEach(item => {
							item.isOpen = true;
						})
					this.listData = result;
				}
			},
			//复选框选中事件
			checkboxChange(item) {
				if (item.checked) {
					this.checkBoxList.push(item);
				} else {
					this.checkBoxList.forEach((item2, index2) => {
						if (item2.id == item.id) {
							this.checkBoxList.splice(index2, 1);
						}
					})
				}
			},
			selectThis(item) {
				this.$store.dispatch('parameters/setSearchObj', {
					key: this.key,
					data: item
				});
				uni.navigateBack({
					delta: 1
				})
			}
		},
		watch: {
			searchText(val) {
				this.showEmptyBtn = val ? true : false;
			}
		}
	}
</script>

<style scoped>
	.searchView {
		min-height: 400rpx;
	}

	.searchView_padding90 {
		padding-bottom: 90rpx;
	}

	.search_view {
		width: 100%;
		background-color: #FFF;
		position: fixed;
		top: 0;
		left: 0;
		padding: 0 30rpx;
		box-sizing: border-box;
		z-index: 2020;
	}

	.search_input {
		width: 100%;
		margin: 20rpx auto;
		font-size: 28rpx;
		height: 70rpx;
		border-radius: 35rpx;
	}

	.search_list {
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;
		margin-top: 110rpx;
		background-color: #FFF;
	}

	.list_item {
		color: #333;
		font-size: 28rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1rpx dashed #ccc;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28rpx;
		flex-wrap: wrap;
	}

	.checkBox_item {
		justify-content: space-between;
	}

	.list_item .avatar {
		width: 74rpx;
		height: 74rpx;
		border-radius: 4rpx;
	}

	.list_item .name {
		color: #333;
		margin: 0 20rpx;
	}

	.list_item .company {
		color: #333;
	}

	.user_item {
		height: auto;
	}

	.user_item .company {
		color: #333;
	}

	.user_item .count {
		margin-left: 20rpx;
		color: #007AFF;
	}

	.user_item .user_inner_box {
		width: 100%;
	}

	.user_item .user_inner_box .user_inner {
		border-top: 1rpx dashed #ccc;
		display: flex;
		align-items: center;
	}
</style>
